<template>
  <div class="app-content">
    <dk-table ref="DkTableRef" table-api="/gs_gold/admin.withdrawal" :cache-table="!getDev()">
      <template #check_slot="{ row }">
        <el-button type="primary" size="small" @click="onCheck(row)">审核</el-button>
      </template>
      <template #status_slot="{ row }">
        <div>
          <el-tag v-if="row.status === '1'" type="success">已审核</el-tag>
          <el-tag v-if="row.status === '-1'" type="warning">已退款</el-tag>
          <el-tag v-if="row.status === '-2'" type="danger">已冻结</el-tag>
          <el-tag v-if="row.status === '0'">未审核</el-tag>
        </div>
      </template>
    </dk-table>
  </div>
  <dk-dialog v-model="show" title="打款审核">
    <el-descriptions :column="2" border>
      <el-descriptions-item label="用户名">{{ chooseItem.user.username }}</el-descriptions-item>
      <el-descriptions-item label="真实姓名">{{ chooseItem.user.truename }}</el-descriptions-item>
      <el-descriptions-item label="金额">
        <span class="text-24px color-#f00">{{ chooseItem.money }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="累积收益">{{ chooseItem.user.income }}</el-descriptions-item>
      <el-descriptions-item label="微信号">{{ chooseItem.user.wx_account }}</el-descriptions-item>
      <el-descriptions-item label="支付宝账号">{{ chooseItem.user.zfb_account }}</el-descriptions-item>
      <el-descriptions-item label="支付宝收款码">
        <el-image
          style="width: 100px; height: 100px"
          :src="chooseItem.user.zfb_image"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :preview-src-list="[chooseItem.user.zfb_image]"
          :initial-index="4"
          fit="cover"
        /> </el-descriptions-item
      ><el-descriptions-item label="微信收款码">
        <el-image
          style="width: 100px; height: 100px"
          :src="chooseItem.user.wx_image"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :preview-src-list="[chooseItem.user.wx_image]"
          :initial-index="4"
          fit="cover"
        />
      </el-descriptions-item>
    </el-descriptions>
    <el-form :model="form" label-width="100px" class="mt10px" label-position="left">
      <el-form-item label="打款审核">
        <el-radio-group v-model="form.status">
          <el-radio value="1">已通过</el-radio>
          <el-radio value="0">待审核</el-radio>
          <el-radio value="-1">驳回并退款</el-radio>
          <el-radio value="-2">驳回并冻结</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="form.status === '-1'" label="退款金额">
        <el-input-number v-model="form.money" :min="0" :max="parseFloat(chooseItem.money)" :step="0.1" />
      </el-form-item>
      <el-form-item label="付款方式">
        <el-radio-group v-model="form.channel">
          <template v-if="form.status === '1'">
            <el-radio value="1">微信转账</el-radio>
            <el-radio value="2">支付宝转账</el-radio>
            <el-radio value="3">微信收款码</el-radio>
            <el-radio value="4">支付宝收款码</el-radio>
          </template>
          <el-radio value="0">其他</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="审核备注">
        <el-input v-model="form.remark" type="textarea" />
      </el-form-item>
    </el-form>
    <div class="text-center">
      <el-button type="primary" @click="onSubmit()">提交</el-button>
    </div>
  </dk-dialog>
</template>
<script setup lang="ts">
import { ref, watch, watchEffect } from 'vue'
import { getDev } from '@/utils/auth'
import { check } from '@/api/withdrawal'
import { ElMessage, ElMessageBox } from 'element-plus'
import { watchDeep } from '@vueuse/core'
// TODO  这里有问题
defineOptions({
  name: 'WithdrawalList'
})
const DkTableRef = ref()
const show = ref(false)
const chooseItem: any = ref({})
const form: any = ref({})
const onCheck = (row) => {
  chooseItem.value = row
  form.value.status = chooseItem.value.status
  form.value.channel = chooseItem.value.channel
  form.value.money = parseFloat(chooseItem.value.money)
  show.value = true
}

watchDeep(
  () => form.value,
  () => {
    if (form.value.status != '1') {
      form.value.channel = '0'
    }
    console.log(form.value)
  }
)

const onSubmit = () => {
  console.log('form.value.status', form.value.status, form.value.remark)
  if (form.value.status != 1 && !form.value.remark) {
    ElMessage({
      message: '备注内容不能为空',
      type: 'warning'
    })
  } else {
    ElMessageBox.confirm('确认提交审核内容?', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        check(chooseItem.value.id, form.value).then((res) => {
          show.value = false
          DkTableRef.value.DkTable.getIndex()
        })
      })
      .catch(() => {})
  }
}
</script>
<style></style>
